<template>
  <div v-if="dialogVisible">
    <el-dialog title="验证视频" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false" :before-close="close">
      <div class="bigBox">
        <div class="videoInDiv">
          <videoRtsp :id="new Date().getTime()" :rtsp="url" width="100%" style="margin-left: 20px;"></videoRtsp>
        </div>
        <!-- <ul class="videoBottomDiv">
        <li class="ulLi">
          <span class="label">区域名称：</span>
          <span class="value">{{ areaName }}</span>
        </li>
        <li class="ulLi">
          <span class="label">监控点：</span>
          <span class="value">{{ name }}</span>
        </li>
        </ul>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // import dialogEditMixin from '@/mixins/dialogEdit'
  import videoRtsp from '@/components/VideoRtsp'
  export default {
    components: {
      videoRtsp
    },
    // mixins: [dialogEditMixin],
    data() {
      return {
        url: '',
        dialogVisible: false
        // name: '',
        // areaName: '',
        // apiKey: {
        //   search: '/Video/',
        //   add: '/Video',
        //   put: '/Video/'
        // }
      }
    },
    // watch: {
    //   searchValue: function (newValue, oldValue) {
    //     this.url = newValue.url
    //     this.name = newValue.name
    //     this.areaName = newValue.area.name
    //   }
    // },
    methods: {
      // resetFormData() {
      //   this.formData = {
      //     url: ''
      //   }
      // },
      open(url) {
        this.url = url
        this.dialogVisible = true
      },
      close() {
        this.url = ''
        this.dialogVisible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .bigBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .videoInDiv {
      padding-right: 40px;
    }
    .videoBottomDiv {
      width: 100%;
      height: 76px;
      background-color: #fff;
      .ulLi {
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        .label {
          color: #333;
        }
        .value {
          color: #666;
          font-weight: 700;
        }
      }
    }
  }
</style>
